<template>
  <div>
    <topBar></topBar>
    <topHeader></topHeader>
      <div>
        <div class="item"
        v-for="(item,index) in question" :key="index"
        >
        <h1 style="color: #665e57;font-size: 30px;text-align: left;margin-left: 350px;margin-bottom: 10px">{{index+1}}.{{item.content}}</h1>
            <el-radio-group v-model="item.pid">
<!--              <div v-for="(item,index) in list" :key="index+1">-->
                <el-radio :label="item.qoption1" style="color: #424242;margin-left: 380px;margin-top: 20px">{{item.qcontent1}}</el-radio>
                  <div>{{str}}</div>
                <el-radio :label="item.qoption2" style=";margin-left: 380px;margin-top: 20px">{{item.qcontent2}}</el-radio>
<!--                <el-radio v-model="radio" label="1" style="margin-left: 380px">{{item.qcontent1}}</el-radio>-->
<!--                <div>{{str}}</div>-->
<!--                <el-radio v-model="radio" label="2" style="margin-left: 380px">{{item.qcontent2}}</el-radio>-->
<!--              </div>-->
            </el-radio-group>
        </div>
        <el-button type="primary" style="text-align: center;margin-left:850px" @click="load">提交</el-button>
<!--        <div class="item" v-for="(item, index) in question" :key="index">-->
<!--          <div>{{item.content}}</div>-->
<!--          <div v-for="(subItem, subIndex) in item.options" :key="subIndex">-->
<!--            <label>-->
<!--              <input type="radio" :name="item.id" v-model="item.optionsCheck" :value="subItem.id">{{subItem.answer}}-->
<!--            </label>-->
<!--          </div>-->
<!--        </div>-->
<!--        <el-table-->
<!--          v-loading="loading"-->
<!--          :data="tableData"-->
<!--          border-->
<!--          stripe-->
<!--          style=" width: 80%;margin:0 auto">-->
<!--          <el-table-column-->
<!--            prop="content"-->
<!--            label="问题">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="qoption1"-->
<!--            label="qoption1">-->
<!--            <template>-->
<!--              <el-radio v-model="radio" :label="1"></el-radio>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="qcontent1"-->
<!--            label="qcentent1">-->
<!--          </el-table-column>-->
<!--          <el-table-column>-->
<!--            <template>-->
<!--              <el-radio v-model="radio" label="2"></el-radio>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="qcontent2"-->
<!--            label="qcentent2">-->
<!--          </el-table-column>-->
<!--        </el-table>-->
      </div>
    <miFooter></miFooter>
  </div>
</template>

<script>
import TopBar from './TopBar'
import TopHeader from './TopHeader'
import MiFooter from './MiFooter'
import request from '../utils/request'

export default {
  name: 'Question',
  components: {
    'topBar': TopBar,
    'topHeader': TopHeader,
    'miFooter': MiFooter
  },
  data () {
    return {
      tableData: [ ],
      radio: 1,
      question: [],
      content: '',
      list: []
    }
  },
  created () {
    this.load()
  },
  methods: {
    load () {
      this.loading = true
      request.get('api/question', {
        // params: {
        //   pageNum: this.currentPage,
        //   pageSize: this.pageSize,
        //   search: this.search
        // }
      }).then(res => {
        this.loading = false
        this.question = res.data.records
        let list = res.data.records
        for (let i = 0; i < list.length; i++) {
          list[i].optionscheck = ''
        }
        this.content = res.data.content
        console.log(this.question)
        console.log(this.content)
      })
    },
    onRadioChange (item1) {
    }
  }
}

</script>

<style scoped>

</style>
